<template>
  <div>
    <h2>作用域插槽</h2>
    <hr>
    <!-- MySlot组件用于显示一个人的姓名 -->
    <!-- 作用域：基于子组件的数据定制子组件的模板但是不修改子组件代码 -->
    <MySlot>
      <template v-slot="scope">
        <!-- scope访问的属性名称由绑定在子组件slot标签上的属性名称决定 -->
        {{ scope.row.lastName + ' ' + scope.row.firstName }}
      </template>
    </MySlot>
  </div>
</template>
<script>
import MySlot from './MySlot.vue'

export default {
  name: 'Mytest',
  components: { MySlot }
  // data () {
  //   return {
  //     info: {
  //       firstName: '小明',
  //       lastName: '王'
  //     }
  //   }
  // }
}
</script>
